<template>
	<view class="container">
		<uni-status-bar></uni-status-bar>
		<view class="back">
			<u-icon name="arrow-left" @tap="toBack" color="#fff" size="30"></u-icon>
		</view>
		<view class="cover">
			<swiper 
			:indicator-dots="true" 
			:autoplay="true" 
			:interval="3000" 
			:duration="1000"
			:circular="true"
			indicator-active-color="#feda45"
			class="cover-wraper">
				<swiper-item class="cover-item" v-for="(item,index) in info.photos" :key="index">
					<image class="cover-image" :src="item.url" ></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="card">
			<view class="cu-bar">
				<view class="action sub-title" style="margin: 0;">
					<text class="text-xxl text-bold text-red">{{info.title}}</text>
					<text class="bg-red" style="width:3rem"></text>
				</view>
			</view>
			<view class="">
				<view v-for="(item,index) in info.keywords" :key="index" class='cu-tag sm line-red margin-xs'>{{item}}</view>
			</view>
			<view class="rate padding-top-xs">
				<view class="">
					<u-rate
					:count="5" 
					v-model="info.rate" 
					size="40" 
					inactive-color="#999999"
					:disabled="true"	
					active-color="#feda45"></u-rate>
					<text class="text-red">{{Number(info.rate).toFixed(1)}}</text>
				</view>
			</view>
			<!-- 喜欢 -->
			<view class="like">
				<view class="avatar-box">
					<view class="cu-avatar-group">
						<view class="cu-avatar round" v-for="(item,index) in info.avatar" :key="index" :style="[{ backgroundImage:'url(' + info.avatar[index] + ')' }]"></view>
					</view>
					<u-icon name="more-dot-fill"></u-icon>
				</view>
				<u-icon v-if="!info.liked" class="heart" name="heart" size="50"></u-icon>
				<u-icon v-if="info.liked" class="heart" size="50" color="#ff4d4d" name="heart-fill"></u-icon>
			</view>
		</view>

		<!-- 介绍内容 -->
		<view class="content">
			<view class="cu-bar">
				<view class="action sub-title" style="margin: 0;">
					<text class="text-xl text-bold text-red">景区介绍</text>
					<text class="bg-red" style="width:2rem"></text>
				</view>
			</view>
			<u-read-more 
			:toggle="true"
			color="#ff4d4d"
			show-height="100">
					<rich-text :nodes="info.intro.length?info.intro:'暂无介绍'"></rich-text>
				</u-read-more>
		</view>
		
		<view class="card">
			<view class="cu-bar">
				<view class="action sub-title" style="margin: 0;">
					<text class="text-xl text-bold text-red">相关事项</text>
					<text class="bg-red" style="width:2rem"></text>
				</view>
			</view>
			<!-- <view class="item flex justify-between padding-top padding-bottom align-center solid-bottom" v-for="(item,index) in info.others" :key="index" >
				<view class="text-bold text-df basis-sm">
					<text >{{item.key}}</text>
				</view>
				<view class="flex flex-sub justify-end">
					<text class="text-xs">{{item.value}}</text>
				</view>
			</view> -->
			<view class="item flex justify-between padding-top padding-bottom align-center solid-bottom">
				<view class="text-bold text-df basis-sm">
					<text >开放时间</text>
				</view>
				<view class="flex flex-sub justify-end">
					<text class="text-xs">{{info.opentime}}</text>
				</view>
			</view>
			<view class="item flex justify-between padding-top padding-bottom align-center solid-bottom">
				<view class="text-bold text-df basis-sm">
					<text >门票价格</text>
				</view>
				<view class="flex flex-sub justify-end">
					<text class="text-red" v-if="info.price==0">免费开放</text>
					<text class="text-red text-price" v-if="info.price>0">{{info.price}}</text>
				</view>
			</view>
			<view class="item flex justify-between padding-top padding-bottom align-center solid-bottom">
				<view class="text-bold text-df basis-sm">
					<text >景区网址</text>
				</view>
				<view class="flex flex-sub justify-end" @tap="toLook(info.href)">
					<button class="cu-btn line-red sm "> 查看</button>
				</view>
			</view>
			
			<view class="item flex justify-between padding-top padding-bottom align-center solid-bottom" >
				<view class="text-bold text-df basis-sm">
					<text >景区地址</text>
				</view>
				<view class="flex flex-sub justify-end align-center">
					<text class="text-xs">{{info.address}}</text>
					<uni-icons type="location-filled" color="#e54d42"></uni-icons>
				</view>
			</view>
		</view>
		
		<view class="card">
			<view class="cu-bar">
				<view class="action sub-title" style="margin: 0;">
					<text class="text-xl text-bold text-red">景区评论</text>
					<text class="bg-red" style="width:2rem"></text>
				</view>
			</view>
			<view class="comment_item" v-for="(item,index) in info.comments" :key="index">
				<view class="comment_user flex margin-top-sm margin-bottom-sm align-center justify-between">
					<view class="flex">
						<u-avatar size="mini" :src="item.user.avatar" class="margin-right-xs"></u-avatar>
						<view class="flex flex-direction">
							<view class="">
								<text class="margin-xs">{{item.user.name}}</text>
								<u-tag size="mini" type="error" :text="'Lv.'+item.user.level" />
							</view>
							<u-rate
							:count="5" 
							v-model="item.rate" 
							size="30" 
							inactive-color="#999999"
							:disabled="true"	
							active-color="#feda45"></u-rate>
						</view>
					</view>
 					<u-tag size="mini" border-color="#FA9425" color="#FA9425"   class="align-end text-xs" shape="circle" type="error" text="关注" mode="light" />
				</view>
				<view class="comment_content">
					{{item.content}}
				</view>
				<!-- 一张图 -->
				<view class="margin-top-sm" v-if="item.images.length === 1">
					<u-image border-radius="8" v-for="(img,index) in item.images" width="100%" height="330rpx" :key="index" :src="img"></u-image>
				</view>
				<!-- 两张图 -->
				<view class="comment_images2 margin-top-sm" v-if="item.images.length === 2">
					<u-image border-radius="8" v-for="(img,index) in item.images" width="49.5%" height="330rpx" :key="index" :src="img"></u-image>
				</view>
				<!-- 三张图 -->
				<view class="comment_images3 margin-top-sm" v-if="item.images.length === 3">
					<u-image border-radius="8" width="59.5%" height="330rpx" :src="item.images[0]"></u-image>
					<view class="right_box">
						<u-image border-radius="8" width="100%" height="162rpx" :src="item.images[1]"></u-image>
						<u-image border-radius="8" width="100%" height="162rpx" :src="item.images[2]"></u-image>
					</view>
				</view>
				<view class="flex block justify-end">
					<u-icon :label="item.like_num" size="40" color="#FF4359" :name="item.islike?'thumb-up-fill':'thumb-up'"></u-icon>
					<u-icon class="padding" :label="item.hate_num" color="#FF4359" size="40" :name="item.ishate?'thumb-down-fill':'thumb-down'"></u-icon>
					<u-icon :label="item.fav_num" size="40" color="#FF4359" :name="item.isfav?'heart-fill':'heart'"></u-icon>
				</view>
			</view>
			<view class="flex justify-center align-center">
				<text class="text-red">查看更多</text>
			</view>
		</view>
		<u-button 
		:hair-line="false" 
		class='comment' 
		:ripple="true"
		ripple-bg-color="#fa3534"
		:plain="true"
		@tap="toComment"
		>
			<u-icon class="margin-right-xs" name="edit-pen-fill" color="#fa3534" size="28"></u-icon>
			<text class="text-red">点评</text>
		</u-button>
	</view>
</template>

<script>
export default{
	data(){
		return{
			info:{
				title:'关山古镇',
				address:'',
				//相关事项
				others:[
					{
						key:'开放时间',
						value:'08:00-17:30(夏季),08:30-17:00(冬季) (1月1日-12月31日 周一-周日)',
					},
					{
						key:'门票',
						value:'惠山古镇:120人民币；文物古迹区:70人民币 (1月1日-12月31日 周一-周日)',
					},
					{
						key:'交通',
						value:'4、15、39、43、75、76、81、83、126、139、158、611路惠山站',
					},
					{
						key:'游览时间参考',
						value:'1-3小时',
					},
					{
						key:'联系电话',
						value:'0510-83333833',
					},
					{
						key:'景区网址',
						value:'http://www.chinahuishan.com',
					},
				],
				//关键词 
				keywords:[
					'5A景区',
					'露天博物馆',
					'观古祠堂品豆腐花',
					'市井老建筑'
				],
				//封面图 
				photos:[
					'https://picsum.photos/seed/picsum/200/300',
					'https://placeimg.com/640/480/nature',
					'https://placeimg.com/640/480/people',
					'https://placeimg.com/640/480/tech',
				],
				liked:false,
				// 景区评分
				rate:4.2,
				avatar: [
					'https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg',
					'https://ossweb-img.qq.com/images/lol/web201310/skin/big81005.jpg',
					'https://ossweb-img.qq.com/images/lol/web201310/skin/big25002.jpg',
					'https://ossweb-img.qq.com/images/lol/web201310/skin/big91012.jpg'
				],
				//介绍
				intro:`山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。
				苔痕上阶绿，草色入帘青。谈笑有鸿儒，往来无白丁。可以调素琴，阅金经。
				无丝竹之乱耳，无案牍之劳形。南阳诸葛庐，西蜀子云亭。孔子云：何陋之有？山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。
				苔痕上阶绿，草色入帘青。谈笑有鸿儒，往来无白丁。可以调素琴，阅金经。
				无丝竹之乱耳，无案牍之劳形。南阳诸葛庐，西蜀子云亭。孔子云：何陋之有？山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。
				苔痕上阶绿，草色入帘青。谈笑有鸿儒，往来无白丁。可以调素琴，阅金经。
				无丝竹之乱耳，无案牍之劳形。南阳诸葛庐，西蜀子云亭。孔子云：何陋之有？`,
				//评论列表
				comments:[
					{
						user:{
							avatar:'https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg',
							name:'舒畅',
							level:5,
						},
						rate:4,
						content:'古镇就是进出景区的通道，两侧都是商家，有一些院落进去都是祠堂。不收门票简单逛逛还行，特意去一趟感觉没必要。里面惠山景区70门票，网络提前一天60。我们当天去的只好买70。另外如果时间充足，按一天算，可以爬山，或者缆车上，走路下前后逛景区。图片都是景区内。',
						images:[
							'https://placeimg.com/640/480/nature',
							'https://placeimg.com/700/500/nature',
						],
						like_num:'10',//赞
						hate_num:'2',//踩
						fav_num:'8',//收藏
						focus:false,//是否关注
						islike:true,//是否赞
						ishate:false,//是否踩
						isfav:false,//是否收藏
					},
					{
						user:{
							avatar:'https://ossweb-img.qq.com/images/lol/web201310/skin/big81005.jpg',
							name:'奥拓',
							level:3,
						},
						rate:3,
						content:'古镇就是进出景区的通道，两侧都是商家，有一些院落进去都是祠堂。不收门票简单逛逛还行，特意去一趟感觉没必要。里面惠山景区70门票，网络提前一天60。我们当天去的只好买70。另外如果时间充足，按一天算，可以爬山，或者缆车上，走路下前后逛景区。图片都是景区内。',
						images:[
							'https://placeimg.com/640/480/nature',
						],
						like_num:'10',//赞
						hate_num:'2',//踩
						fav_num:'8',//收藏
						focus:false,//是否关注
						islike:false,//是否赞
						ishate:false,//是否踩
						isfav:true,//是否收藏
					},
					{
						user:{
							avatar:'https://ossweb-img.qq.com/images/lol/web201310/skin/big91012.jpg',
							name:'板都',
							level:3,
						},
						rate:3,
						content:'古镇就是进出景区的通道，两侧都是商家，有一些院落进去都是祠堂。不收门票简单逛逛还行，特意去一趟感觉没必要。里面惠山景区70门票，网络提前一天60。我们当天去的只好买70。另外如果时间充足，按一天算，可以爬山，或者缆车上，走路下前后逛景区。图片都是景区内。',
						images:[
							'https://placeimg.com/640/480/nature',
							'https://placeimg.com/700/500/nature',
							'https://placeimg.com/750/375/nature',
						],
						like_num:'10',//赞
						hate_num:'2',//踩
						fav_num:'8',//收藏
						focus:false,//是否关注
						islike:false,//是否赞
						ishate:true,//是否踩
						isfav:false,//是否收藏
					},
				],
			}
		}
	},
	onLoad(e) {
		console.log("e",e);
		this.getInfo(e.id);
	},
	mounted(){
		
	},
	methods:{
		toLook(href){
			console.log("toLook(info.href)",href);
			uni.navigateTo({
				url:'./webview?href=' + href
			})
		},
		getInfo(id){
			this.$api.keydetail({id:id}).then(res=>{
				console.log("res",res);
				let info = res.data.pois[0];
				let deep_info = res.data.pois[0].deep_info;
				if(res.data.status == 1){
					this.info.keywords = info.type.split(";");
					this.info.photos = info.photos;
					this.info.intro = deep_info.intro;
					this.info.title = info.name;
					this.info.rate = deep_info.rating;
					this.info.address = info.address;
					this.info.href = deep_info.ordering_web_url;
					this.info.opentime = info.biz_ext.open_time+`(${info.biz_ext.opentime2})`;
					this.info.price = deep_info.price;
				}
			})
		},
		toBack(){
			uni.navigateBack({
				
			})
		},
		toComment(){
			uni.navigateTo({
				url:"./comment"
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.container{
	position: relative;
	padding-bottom: 100rpx;
	.comment_content{
		text-indent: 40rpx;
	}
	// 不同数量的图片不同样式
	// 两张
	.comment_images2{
		display: flex;
		justify-content: space-between;
		align-items: center;
		height:330rpx;
		width: 100%;
	}
	// 三张
	.comment_images3{
		display: flex;
		justify-content: space-between;
		align-items: center;
		.right_box{
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: center;
			width: 40%;
			height: 330rpx;
		}
	}
	.comment{
		position: fixed;
		width: 100vw;
		display: flex;
		justify-content: center;
		border:none;
		border-radius: 0;
		align-items: center;
		background-color: #fff!important;
		box-shadow: 0 -10rpx 20rpx 4rpx rgba(0,0,0,.1);
		bottom: 0;
	}
	.content{
		width: 96vw;
		border-radius: 10rpx;
		background-color: #fff;
		box-shadow: 0 10rpx 20rpx 4rpx rgba(0,0,0,.1);
		margin: 20rpx auto;
		box-sizing: border-box;
		padding: 20rpx 30rpx;
	}
	.card{
		width: 96vw;
		border-radius: 10rpx;
		background-color: #fff;
		box-shadow: 0 10rpx 20rpx 4rpx rgba(0,0,0,.1);
		margin: 20rpx auto;
		position: relative;
		// top:-100rpx;
		box-sizing: border-box;
		padding:10rpx 30rpx 20rpx;
		.like{
			display: flex;
			justify-content: space-between;
			box-sizing: border-box;
			padding-top:16rpx;
			.avatar-box{
				margin-left: -18rpx;
			}
		}
		.title{
			font-size: 38rpx;
			font-weight: 700;
		}
		.desc{
			font-size: 24rpx;
			margin: 20rpx auto;
		}
		.rate{
			display: flex;
			align-items: center;
			justify-content: space-between;
			text{
				margin-left: 20rpx;
				font-size: 30rpx;
				font-weight: bold;
			}
		}
		
	}
	.back{
		position: fixed;
		width: 60rpx;
		height: 60rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: rgba(0,0,0,.3);          
		border-radius: 50%;
		top:50rpx;
		left:40rpx;
		z-index: 10;
	}
	.cover{
		height: 500rpx;
		box-shadow: 0 4rpx 10rpx 2rpx rgba(0,0,0,.1);
		.cover-wraper{
			height: 500rpx;
		}
		.cover-item{
			width: 100%;
			height: 500rpx;
		}
		.cover-image{
			width: 100%;
			height: 100%;
		}
	}
	
}
</style>
